<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>评论列表</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <link rel="stylesheet" href="./libs/layui/css/modules/layer/default/layer.css">
  <script src="./libs/jquery/jquery.min.js"></script>
  <script src="./libs/layui/layui.js"></script>
  <script src="./libs/layui/lay/modules/layer.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="common_title">
      评论列表
    </div>
    <div class="container-fluid common_con">
      <table class="table table-striped table-bordered table-hover mp20">
        <thead>
          <tr>
            <th>作者</th>
            <th>评论</th>
            <th>评论在</th>
            <th>提交于</th>
            <th>状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <!-- 定义      -->
        </tbody>
      </table>
      <div class="row text-center">
        <!-- 分页器  -->
        <ul id="pagination" class="pagination-sm"></ul>
      </div>

    </div>
  </div>
  <script src="./js/http-myajax.js"></script>
  <script src="./libs/art-template/template-web.js"></script>
  <!-- 定义评论列表模板 -->
  <script id="art" type="text/html">
    {{each data}}
    {{if $value.state == '已拒绝'}} 
      <tr class="danger">
    {{else}} 
      <tr>
    {{/if}}
            <td>{{$value.author}}</td>
            <td>{{$value.content}}</td>
            <td>{{$value.title}}</td>
            <td>{{$value.date}}</td>
            <td>{{$value.state}}</td>
            <td class="text-center">
              {{if  $value.state == '已通过'}}
              <a href="javascript:void(0);;" class="btn btn-warning btn-xs">拒绝</a>
              {{else if  $value.state == '已拒绝'}}
              <a href="javascript:void(0);;" class="btn btn-success btn-xs" >批准</a>
              {{else}}
              <a href="javascript:void(0);;" class="btn btn-warning btn-xs">拒绝</a>
              <a href="javascript:void(0);;" class="btn btn-success btn-xs" >批准</a>
              {{/if}}
              <a  onclick="del({{$value.id}}) href="javascript:void(0);;" class="btn btn-danger btn-xs">删除</a>
            </td>
          </tr>         
    {{/each}}
  </script>
  <script>
    $(function() {
      getlist();
      get_comment();
    })
    //获取评论数据
    function get_comment(curr, limit) {
      let parms = {
        page: curr,
        perpage: limit
      };
      myAjax('GET','/admin/comment/search',null,function(resData) {
        console.log(resData);
        // let resData = resData.data;
        let resHtml = template('art',resData.data)
        $('#tbody').html(resHtml)
      })
    }
    //渲染分页控件
    function page_render(totalCount, curr) {
      layui.use('laypage',function() {
        var laypage = layui.laypage;
        laypage.render({
          // 1.0 将分页样式渲染到指定的div中
          elem: 'pager',
          count: totalCount,
          curr: curr,
          limit: 6,
          jump: function (obj, first) {
            // obj.curr表示用户点击的当前页码
            // obj.limit表示此分页控件每页显示的条数
            // first 第一次将来是true，用户点击页码触发的时候 undefined
            if (!first) {
              get_comment(obj.curr, obj.limit);
            }
          }
        })
      })
    }
    //删除 毛用都没有
    // function del(a_id) {
    //         myAjax('POST','/admin/article/delete',{id:a_id},function(redData) {
    //             if(redData.code == 200) {
    //                 //重新调用更新
    //                 get_list();
    //             }
    //         })
    //     }
    //未登录的话跳转到登录页面
    function getlist() {
      myAjax('GET','/admin/comment/search',null,function(resData) {
        // console.log(resData);
      })
    }
  </script>
</body>

</html>